import React, {Component} from "react"
import {View, Text, StyleSheet, Image, TouchableHighlight} from "react-native";
import {connect} from "react-redux";
import {Carousel} from "@ant-design/react-native";
import Content from "../Components/Content"
import PlaceHolder from "../Components/Placeholder"
import MatertialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons"
import MaterialIcons from "react-native-vector-icons/MaterialIcons"
import ImageBox from "../Components/ImageBox"
import {SCREEN_HEIGHT,SCREEN_WIDTH, getRelativeValue} from "../../static/js/tools";
import Card from "../Components/Card"
import Icon from "../Components/Iconfont"
interface IProps{}
/**
 * @Author Training
 * @Desc 首页
 */
function dot (props:any){
    let {count,current} = props;
    return <View style={[styles.swiperDotBox]}>
        {
            (()=>{
                let dots = [];
                for (let i = 0; i < count; i++) {
                    dots.push(<View key={i} style={[styles.swiperDot,{backgroundColor:current===i?"#F54949":"#ccc"}]}></View>)
                }
                return dots
            })()
        }
    </View>
}
class App extends Component<IProps>{
    constructor(props: IProps | Readonly<IProps>){
        super(props);

    }

    render():any{

        console.log(getRelativeValue(182),SCREEN_WIDTH);
        return (<View>
            <Content title={"首页"}>
                <Carousel style={styles.swiper} pagination={dot} autoplay infinite dotStyle={styles.swiperDot} dotActiveStyle={styles.swiperActiveDot}>
                    <View>
                        <Image style={styles.swiperImg}  source={{uri:"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4135617875,3164479078&fm=26&gp=0.jpg"}}/>
                    </View>
                    <View>
                        <Image style={styles.swiperImg}  source={{uri:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbbs.jooyoo.net%2Fattachment%2FMon_0910%2F24_293205_2d4adfacccd3031.jpg&refer=http%3A%2F%2Fbbs.jooyoo.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1612770316&t=6c97291cf4eaddafc1bd4d682c9f6922"}}/>
                    </View>
                    <View>
                        <Image style={styles.swiperImg}  source={{uri:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa1.att.hudong.com%2F57%2F92%2F01300542193590138063924441627.jpg&refer=http%3A%2F%2Fa1.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1612770333&t=51a65870864d235018481de4e0ed2095"}}/>
                    </View>
                </Carousel>
                <View style={styles.menuBox}>
                    <View style={styles.menu}>
                        <TouchableHighlight >
                            <View style={styles.menuItem}>
                                <Image style={styles.menuImg} source={require("../../static/images/icon/index/1.png")}/>
                                <Text>新游首发</Text>
                            </View>
                        </TouchableHighlight>
                        <TouchableHighlight>
                            <View style={styles.menuItem}>
                                <Image style={styles.menuImg} source={require("../../static/images/icon/index/2.png")}/>
                                <Text>今日开服</Text>
                            </View>
                        </TouchableHighlight>

                        <TouchableHighlight>
                            <View style={styles.menuItem}>
                                <Image style={styles.menuImg} source={require("../../static/images/icon/index/3.png")}/>
                                <Text>热门游戏</Text>
                            </View>
                        </TouchableHighlight>

                        <TouchableHighlight>
                            <View style={styles.menuItem}>
                                <Image style={styles.menuImg} source={require("../../static/images/icon/index/4.png")}/>
                                <Text>本周热门</Text>
                            </View>
                        </TouchableHighlight>

                    </View>
                </View>
                <PlaceHolder bgColor={"#F5F5F5"}/>
                <Card title={"精品好游"} Icon={<MatertialCommunityIcons name={"crown-outline"} size={28} color={"#FF9D1C"}></MatertialCommunityIcons>} right={{text:<Text>查看更多 <MaterialIcons name={"navigate-next"} color={"#000"}size={14} /></Text>}}>
                    <View style={styles.recommend}>
                        <ImageBox style={styles.imageBox} textHeight={20} text={<Text style={{textAlign:"center"}}>提示文字</Text>} src={{uri:"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3335200364,664435613&fm=26&gp=0.jpg"}} />
                        <ImageBox style={styles.imageBox} textHeight={20} text={<Text style={{textAlign:"center"}}>提示文字</Text>} src={{uri:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic4.zhimg.com%2F50%2Fv2-095b2db945e2d3e0644ccbb26eab8ed8_hd.jpg&refer=http%3A%2F%2Fpic4.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613705414&t=f4f1fbdfe7aeff0a874a73efeed14eed"}} />
                        <ImageBox style={styles.imageBox} textHeight={20} text={<Text style={{textAlign:"center"}}>提示文字</Text>} src={{uri:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201901%2F19%2F20190119231949_buetu.jpg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613707184&t=ca4a43ad982512647ddc4e7ae337825d"}} />
                        <ImageBox style={styles.imageBox} textHeight={20} text={<Text style={{textAlign:"center"}}>提示文字</Text>} src={{uri:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201901%2F19%2F20190119231949_buetu.jpg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613707184&t=ca4a43ad982512647ddc4e7ae337825d"}} />
                    </View>
                </Card>
            </Content>
        </View>);
    }
}

const styles = StyleSheet.create({
    swiper:{
        height:180,
        justifyContent:"flex-end",
        alignItems:"flex-end"
    },
    swiperImg:{
        height:"100%",
        resizeMode: 'stretch',
    },
    swiperDotBox:{
        position:"absolute",
        bottom:43.5,
        right:50,
        flexDirection:"row"
    },
    swiperDot:{
        borderRadius:4,
        width:8,
        height:8,
        backgroundColor: "#ccc",
        marginRight:5
    },
    swiperActiveDot:{
        backgroundColor:"#F54949"
    },
    menuBox:{
        position:"relative",
        height:60
    },
    menu:{
        flexDirection: "row",
        justifyContent: "space-around",
        width:"90%",
        backgroundColor:"white",
        position:"absolute",
        left:"5%",
        top:-37,
        borderRadius: 10,
        paddingTop:28,
    },
    menuImg:{
        resizeMode: 'stretch',
        width:25,
        height:27,
        marginBottom:5
    },
    menuItem:{
        justifyContent:"center",
        alignItems: "center",
    },
    recommend:{
        display:"flex",
        flexDirection:"row",
        justifyContent:"space-between",
        flexWrap:"wrap"
    },
    imageBox:{
        marginTop:10,
        width:getRelativeValue(182),
        height:getRelativeValue(80.16)
    }
});
const mapStateToProps = (state:any) => ({

});
const mapDispatchToProps = (dispatch:any) => ({

});
export default connect(mapStateToProps,mapDispatchToProps)(App)
